<template>
  <div class="integral-deploy">
    <el-form label-width="80px" :disabled="isOwnAuth=='0'">
      <el-tabs v-model="activeName2" type="card">
        <el-tab-pane label="积分获取" name="first">
          <div class="mode-box">
            <div class="from_main infon">
              <div class="infon_text">
                <span class="infon_shu"></span>
                <span class="infon_text_t">积分方式</span>
              </div>
            </div>
            <div class="mode-box1">
              <el-radio-group v-model="ruleForm.getType" @change="switchEl">
                <el-radio :label="0">不积分</el-radio>
                <el-radio :label="1">按支付金额</el-radio>
                <el-radio :label="2">按单品积分</el-radio>
              </el-radio-group>
              <div class="payment-boss" v-if="ruleForm.getType==1">
                <div class="payment-box">
                  <div class="payment-right" style="float: left;">支付</div>
                  <sd-input :val.sync='ruleForm.howMuthOne' :disableds="isOwnAuth=='0'" class="payment-input payment-right"></sd-input>
                  <span> 元，积1分</span>
                  <el-checkbox v-model="ruleForm.isNoIntegral" :true-label='1' :false-label='0'>商品库设置不积分的商品依然不积分</el-checkbox>
                </div>
                <div class="payment-box">
                  <span class="payment-right">储值积分规则</span>
                  <el-radio-group v-model="ruleForm.rechargeRule">
                    <el-radio :label="0">储值时积分</el-radio>
                    <el-radio :label="1">使用余额支付时积分</el-radio>
                    <el-radio :label="2">不积分</el-radio>
                  </el-radio-group>
                </div>
                <div class="payment-box">
                  <span class="payment-right">次卡积分规则</span>
                  <el-radio-group v-model="ruleForm.timeCardRule">
                    <el-radio :label="0">购买次卡时积分</el-radio>
                    <el-radio :label="1">使用次卡支付时积分</el-radio>
                    <el-radio :label="2">不积分</el-radio>
                  </el-radio-group>
                </div>
                <div class="payment-box">
                  <div class="payment-box1">积分规则</div>
                  <el-input type="textarea" v-model="ruleForm.paymentDesc" placeholder="此处用于会员端显示，最多500字" axlength="500"></el-input>
                </div>
              </div>
              <div class="single-boss" v-if="ruleForm.getType==2">
                <div class="payment-box">
                  <span class="payment-right">
                    按商品库中设置的商品积分情况积分</span>
                  <span class="button-lass" @click="clickSelectGoods(false,'查看积分商品')">查看积分商品</span>
                </div>
                <div class="payment-box2">
                  <div class="payment-div payment-right">
                    商品积分规则</div>
                  <div class="payment-checkbox">
                    <el-checkbox :true-label='1' :false-label='0' v-model="ruleForm.isNoIntegralOne" class="payment-checkbox1"> 赠送商品不积分</el-checkbox>
                    <el-checkbox :true-label='1' :false-label='0' v-model="ruleForm.isNoIntegralTwo">议价商品不积分</el-checkbox>
                    <el-checkbox :true-label='1' :false-label='0' v-model="ruleForm.isNoIntegralThree">进行变价方案的商品不积分</el-checkbox>
                  </div>
                </div>
                <div class="payment-box">
                  <div class="payment-box1">积分规则</div>
                  <el-input type="textarea" v-model="ruleForm.goodDesc" placeholder="此处用于会员端显示，最多500字" axlength="500"></el-input>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="积分消费" name="second">
          <div class="consume-box">
            <div class="consume-right">
              <el-checkbox v-model="ruleForm.isAtCash" :true-label='1' :false-label='0'>抵现</el-checkbox>
            </div>
            <el-radio-group v-model="ruleForm.atCathRuleType" class="consume-radio" :disabled="ruleForm.isAtCash==0">
              <el-radio :label="0">通用规则</el-radio>
              <el-radio :label="1">多级规则</el-radio>
            </el-radio-group>
            <div class="consume-ring">
              <div class="consume-width">
                <div class="consume-top">
                  <el-input class="payment-input payment-right" maxlength="8" v-model="ruleForm.howManyOne" placeholder="请输入内容" :disabled="ruleForm.isAtCash==0" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
                  <span> 积分 = 1 元</span>
                </div>
                <div class="consume-bottom">
                  <el-table :data="ruleForm.gradeRules" border style="width: 100%" max-height="245">
                    <el-table-column prop="name" label="会员等级" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="gradeIntegralNum" label="抵扣1元所需积分值" width="240" align="center">
                      <template slot-scope="scope">
                        <el-input class="payment-input payment-rights" maxlength="8" v-model="scope.row.gradeIntegralNum" :disabled="ruleForm.isAtCash==0" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>

          <div class="payment-box">
            <div class="consume-right">
              <el-checkbox v-model="ruleForm.isIntegralGood" :true-label='1' :false-label='0'>换购</el-checkbox>
            </div>
            <div class="consume-right">设置换购商品</div>
            <el-button type="primary" @click="clickSelectGoods(true,'选择商品')" :disabled="ruleForm.isIntegralGood==0">添加商品</el-button>
          </div>
          <div style="width: 100%;margin-left:23px;">
            <el-table :data="ruleForm.Datagodds" border style="width:922px" max-height="250">
              <el-table-column prop="barCode" label="商品条码" width="120" align="center"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="120" align="center"></el-table-column>
              <el-table-column prop="goodsParameterList" label="规格型号" align="center">
                <template slot-scope="scope">
                  <div v-for="(item, index) in  scope.row.goodsParameterList" :key="index" v-if="item">
                    <span>{{item.paramName}} :</span>
                    <span>{{item.paramValue}} </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
              <el-table-column prop="goodsSalePrice" label="价格" align="center"></el-table-column>
              <el-table-column prop="name" label="所需积分值" align="center" width="240">
                <template slot-scope="scope">
                  <el-input class="payment-input payment-right" maxlength="8" v-model="scope.row.integralNum" :disabled="ruleForm.isIntegralGood==0" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleCancel_good(scope.$index)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="payment-box">
            <div class="payment-box1">积分规则</div>
            <el-input type="textarea" v-model="ruleForm.consumDesc" placeholder="此处用于会员端显示，最多500字" maxlength="500"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="积分清零" name="third">
          <div class="payment-box">
            <el-checkbox v-model="ruleForm.isIntegralReset" :true-label='1' :false-label='0' @change="iReset">积分清空 </el-checkbox>
            <span> 在每年(公历)的 </span>
            <el-date-picker :disabled="ruleForm.isIntegralReset==0" v-model="ruleForm.integralResetTime" format=" MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
            </el-date-picker>
            <span> 清空上一年会员卡积分。</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <el-dialog :title="goodsTitle" :visible.sync="dialogGood" show-close :closeOnClickModal='false' :closeOnPressEscape='false' append-to-body width="60%">
      <div class="tableSearch">
        <el-form size="mini" label-width="80px" class="demo-ruleForm">
          <el-form-item label="商品分类:">
            <el-cascader size="small" change-on-select expand-trigger="hover" :options="commodityCategoryfunList" v-model="selectdata.commodityCategory">
            </el-cascader>
          </el-form-item>
          <el-form-item label="商品品牌:" label-width="150px">
            <el-select size="small" v-model="selectdata.commodityBrand" placeholder="请先选择商品品牌">
              <el-option v-for="(item,index) in commodityBrandList" :key="index" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="25px">
            <el-input clearable v-model="selectdata.keyword" placeholder="输入商品名称或条形码"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="_handleSearchGood">搜索</el-button>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="distribution" v-if="Goodstype">添加商品</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="goodArray" stripe border ref="multipleTablegood" tooltip-effect="dark" width="1100px" max-height="300" @selection-change="changeFun">
        <el-table-column type="selection" v-if="Goodstype" key="1" width="55" @selection-change="changeFun"></el-table-column>
        <el-table-column prop="barCode" label="商品条形码" align="center" key="2"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center" key="3"></el-table-column>
        <el-table-column prop="goodsParameterList" label="规格型号" align="center" key="4">
          <template slot-scope="scope">
            <div v-for="(item, index) in  scope.row.goodsParameterList" :key="index" v-if="item">
              <span>{{item.paramName}} :</span>
              <span>{{item.paramValue}} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="brand" label="品牌" align="center" key="5"></el-table-column>
        <el-table-column prop="goodsSalePrice" label="价格" align="center" key="6"></el-table-column>
        <el-table-column prop="goodsUnitName" label="单位" align="center" key="7"></el-table-column>
        <el-table-column prop="soldIntegral" label="积分值" align="center" v-if="!Goodstype" key="8"></el-table-column>
      </el-table>
      <page-unit :pageData="pageDataGoods" :func="handleGetGoods"></page-unit>
    </el-dialog>
    <div slot="footer" class="deploy-footer">
      <el-button @click="Sub" style="margin-right:20px;">取 消</el-button>
      <el-button type="primary" v-if="isOwnAuth!='0'" @click="add">保 存</el-button>
    </div>
  </div>
</template>
<script>
import pageUnit from "@/components/Page";
import sdInput from "@/components/SdInput";
import { mapState } from "vuex";
import util from "@/util";

import {
  getGoodsPosListByPage,
  selectByGoodsId,
  getGoodsClassifyTreeList,
  saveOrUpdateIntegralRule,
  getIntetralRuleInfo,
  listMemberLevel
} from "@/api";
export default {
  computed: mapState(["merchantId", "power", "isOwnAuth"]),

  props: {
    dialogVisiblemix: "",
    deployId: "",
    disableds: ""
  },
  components: {
    pageUnit: pageUnit,
    sdInput: sdInput
  },
  data() {
    return {
      goodsTitle: "",
      ruleForm: {
        atCathRuleType: null,
        isIntegralGood: "",
        howManyOne: null,
        gradeRules: [],
        isNoIntegral: "",
        isAtCash: "",
        goodDesc: "",
        paymentDesc: "",
        goodRule: [],
        timeCardRule: 2,
        rechargeRule: 2,
        getType: 0,
        isIntegralReset: 0,
        howMuthOne: ""
      },
      isIntegralReset: 0,
      shopMulti: [],
      Goodstype: "",
      Datagodds: [],
      tableData: [
        {
          da: 555555555555
        }
      ],
      integralResetTime: "01-01",
      dialogVisiblemixs: this.dialogVisiblemix,
      deployIds: this.deployId,
      //商品输入框
      commodityBrandList: [],
      commodityCategoryfunList: [], //分类数据
      selectdata: {
        commodityBrand: "", //品牌
        commodityCategory: "",
        keyword: ""
      },
      goodArray: [],
      pageDataGoods: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      activeName2: "first",
      radio2: 3,
      input: "",
      checkList: [],
      dialogGood: false,

      consumDesc: ""
    };
  },
  watch: {
    deployId: function(val) {
      this.deployIds = val;
    },
    dialogVisiblemix: function(val) {
      this.dialogVisiblemixs = val;
      if (this.dialogVisiblemixs == true) {
        this.integralSee();
      }
    }
  },
  mounted() {
    // 获取表格数据
    this.listMemberLevel();
    this.integralSee();
  },
  methods: {
    switchEl() {
      if (this.ruleForm.rechargeRule == null) {
        this.$delete(this.ruleForm, "rechargeRule");
        this.$set(this.ruleForm, "rechargeRule", 2);
      }
      if (this.ruleForm.timeCardRule == null) {
        this.$delete(this.ruleForm, "timeCardRule");
        this.$set(this.ruleForm, "timeCardRule", 2);
      }
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    integralSee() {
      let data = {
        integralRuleId: this.deployIds,
        shopId: this.merchantId
      };
      getIntetralRuleInfo(data).then(res => {
        this.ruleForm = res.data;
        this.ruleForm.Datagodds = res.data.goodsDetailVOs;
        this.ruleForm.gradeRules = res.data.gradeRules;
        if (this.ruleForm.isIntegralGood == null) {
          this.ruleForm.isIntegralGood = 0;
        }
        if (this.ruleForm.isAtCash == null) {
          this.ruleForm.isAtCash = 0;
        }
        console.log(this.ruleForm.isIntegralReset);
        if (this.ruleForm.isIntegralReset == null) {
          this.isIntegralReset = 0;
        } else {
          this.isIntegralReset = this.ruleForm.isIntegralReset;
        }
        this.ruleForm.integralResetTime = util.foryear(
          this.ruleForm.integralResetTime
        );
        console.log(this.ruleForm);
      });
    },
    distribution() {
      if (this.shopMulti === undefined) {
        this.$message({
          type: "info",
          message: "请选择商品"
        });
        return false;
      } else {
        this.ruleForm.Datagodds = this.ruleForm.Datagodds.concat(
          JSON.parse(JSON.stringify(this.shopMulti))
        );
        let newArr = [];
        this.ruleForm.Datagodds.forEach(cur => {
          if (!newArr.some(i => i.goodsCompanyId == cur.goodsCompanyId)) {
            newArr.push(cur);
          }
        });
        this.ruleForm.Datagodds = newArr;
        this.dialogGood = false;
      }
    },
    //商品多选
    changeFun(val) {
      this.shopMulti = val;
    },
    handleCancel_good(index) {
      this.ruleForm.Datagodds.splice(index, 1);
    },
    add() {
      if (
        (this.ruleForm.howMuthOne == 0 ||
          this.ruleForm.howMuthOne == "" ||
          this.ruleForm.howMuthOne == null) &&
        this.ruleForm.getType == 1
      ) {
        this.$message({
          showClose: true,
          message: "积分方式的支付金额不能设为0或空！",
          type: "error"
        });
        return false;
      }
      let data = {
        id: this.deployIds,
        getType: this.ruleForm.getType,
        isAtCash: this.ruleForm.isAtCash,
        atCathRuleType: this.ruleForm.atCathRuleType,
        isIntegralReset: this.ruleForm.isIntegralReset,
        consumDesc: this.ruleForm.consumDesc,
        isIntegralGood: this.ruleForm.isIntegralGood
      };
      if (this.ruleForm.isIntegralReset == 1) {
        data.integralResetTime = this.ruleForm.integralResetTime;
      }
      if (this.ruleForm.getType == 1) {
        data.howMuthOne = this.ruleForm.howMuthOne;
        data.isNoIntegral = this.ruleForm.isNoIntegral;
        data.rechargeRule = this.ruleForm.rechargeRule;
        data.timeCardRule = this.ruleForm.timeCardRule;
        data.paymentDesc = this.ruleForm.paymentDesc;
      } else if (this.ruleForm.getType == 2) {
        // data.goodRule = this.ruleForm.goodRule;
        data.isNoIntegralOne = this.ruleForm.isNoIntegralOne;
        data.isNoIntegralTwo = this.ruleForm.isNoIntegralTwo;
        data.isNoIntegralThree = this.ruleForm.isNoIntegralThree;
        data.goodDesc = this.ruleForm.goodDesc;
      }
      if (this.ruleForm.atCathRuleType == 0) {
        data.howManyOne = this.ruleForm.howManyOne;
      }
      if (this.ruleForm.atCathRuleType == 1) {
        data.gradeRules = this.ruleForm.gradeRules;
      }
      // console.log(this.atCathRuleType);
      if (this.ruleForm.isIntegralGood == 1) {
        data.goodsDetailVOs = this.ruleForm.Datagodds;
      }
      if (
        this.ruleForm.isIntegralGood == 1 &&
        this.ruleForm.Datagodds.some(
          i => i.integralNum == "" || i.integralNum == null
        )
      ) {
        this.$message({
          showClose: true,
          message: "请填入添加商品的积分值！",
          type: "error"
        });
        return false;
      }
      saveOrUpdateIntegralRule(data).then(res => {
        this.Sub();
        this.integralSee();
      });
    },
    Sub() {
      this.$emit("dialogVis", false);
    },
    iReset() {
      console.log(this.isIntegralReset);
    },
    // 商品品牌
    commodityBrand() {
      selectByGoodsId({
        shopId: this.merchantId,
        type: "0"
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.commodityBrandList = res.data.list;
      });
    },
    listMemberLevel() {
      let data = {
        companyId: this.merchantId,
        status: 0
      };
      listMemberLevel(data).then(res => {
        this.ruleForm.gradeRules = res.data.memberLevelList;
      });
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部"
        };
        res.data.unshift(a);
        this.commodityCategoryfunList = res.data;
      });
    },
    // 点击选择商品
    clickSelectGoods(type, name) {
      this.goodsTitle = name;
      this.Goodstype = type;
      this.handleGetGoods(
        this.pageDataGoods.pageSize,
        this.pageDataGoods.currentPage
      );
      this.commodityBrand(); //品牌接口
      this.commodityCategoryfun(); //分类接口
      this.dialogGood = true;
    },
    // 获取商品列表
    handleGetGoods(pageSize, pageNum) {
      let primaryClassifyId =
        this.selectdata.commodityCategory[
          this.selectdata.commodityCategory.length - 1
        ] || "";

      let data = {
        brandId: this.selectdata.commodityBrand,
        primaryClassifyId: primaryClassifyId,
        name: this.selectdata.keyword,
        pageSize: pageSize,
        pageNo: pageNum,
        shopId: this.merchantId,
        status: 0
      };
      if (this.Goodstype == true) {
        data.soldIntegral = 2;
      } else {
        data.soldIntegral = 1;
      }
      getGoodsPosListByPage(data).then(res => {
        this.goodArray = res.data.list;
        this.pageDataGoods.totalItems = res.data.total;
      });
    },
    // 商品搜索
    _handleSearchGood() {
      this.handleGetGoods(this.pageDataGoods.pageSize, 1);
    }
  }
};
</script>
<style >
.integral-deploy .el-tabs__header {
  width: 292px;
  margin: 0 auto;
}
.integral-deploy .payment-checkbox {
  width: 200px;
  float: left;
  margin-left: 10px;
}
.integral-deploy .payment-checkbox .el-checkbox {
  display: block;
  line-height: 30px;
}
.consume-radio .el-radio {
  line-height: 40px;
}
</style>
<style scoped>
.mode-box {
  width: 990px;
  margin: 0 auto;
}
.mode-box1 {
  width: 500px;
  margin: 15px 0 15px 28px;
}
.payment-box {
  width: 666px;
  margin: 25px 0 15px 0;
}
.payment-input {
  width: 150px;
  line-height: 30px;
  float: left;
}
.payment-right {
  margin-right: 10px;
}
.payment-rights {
  margin-left: 37px;
}
.payment-box1 {
  line-height: 40px;
  display: block;
}
.payment-div {
  float: left;
}
.payment-checkbox1 {
  line-height: 20px !important;
}
.payment-box2 {
  height: 80px;
}
.deploy-footer {
  width: 300px;
  margin: 25px auto;
}
.consume-radio {
  width: 100px;
  float: left;
}
.consume-right {
  float: left;
  margin-right: 10px;
  line-height: 40px;
}
.consume-width {
  width: 421px;
  margin-left: 10px;
  float: left;
}
.consume-bottom {
  margin-top: 20px;
}
.consume-box {
  margin-top: 15px;
  /* height: 310px; */
}
.consume-top {
  height: 40px;
  line-height: 40px;
}
.button-lass {
  width: 98px;
  line-height: 40px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  font-size: 14px;
  padding: 8px;
  border-radius: 3px;
  text-indent: 10px;
}
.consume-ring {
  width: 500px;
  float: left;
  margin-bottom: 20px;
}
</style>
